<template>
    <div class="m-table">
        <div class="button-contant" v-if="isButton">
            <el-button
                v-for="item in tableButtonList"
                :key="item.id"
                :type="item.type"
                :icon="item.icon"
                size="medium"
                :loading="item.loading"
                @click="item.click(tableButtonList, that, $parent)">
                {{item.name}}
            </el-button>
        </div>
        <el-table
            class="user-table"
            :data="tableList"
            :height="tableHeight"
            stripe
            stripe-even-color="#333"
            :header-cell-style="{background:'rgb(240, 240, 240)', color: '#333'}">
            <el-table-column
                v-if="isShowIndex"
                align="center"
                header-align="center"
                type="index"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                v-for="column in tableColumns"
                :key="column.name"
                :prop="column.name"
                :label="column.label"
                :align="column.align ? column.align : 'center'"
                :header-align="column.align ? column.align : 'center'"
                :width="column.width">
                <template slot-scope="scope">
                    <expandDom
                        v-if="column.render"
                        :render="column.render"
                        :index="scope.$index"
                        :column="column"
                        :row="scope.row">
                    </expandDom>
                    <span v-else>
                        {{ scope.row[column.name] }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination" v-if="isPagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'm-table',
    components: {
        expandDom: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                const scope = ctx.parent // scope：当前页面的this
                const row = ctx.props.row // row：当前行的对象
                const index = ctx.props.index // index：当前行的序号
                let column = {} // column：当前列的对象
                if (ctx.props.column) {
                    column = ctx.props.column
                }
                /**
                 * @param {Object} h 渲染函数参数对象
                 * @param {Number} index 该行下角标
                 * @param {Object} row 所在行对象
                 * @param {Object} column 所在列对象
                 * @param {Object} scope 表格项对象
                 */
                return ctx.props.render(h, index, row, column, scope)
            },
        },
    },
    props: {
        // 表头数据
        tableColumns: {
            type: Array,
            default: () => { }
        },
        // 表格的数据
        tableList: {
            type: Array,
            default: () => { }
        },
        // 是否显示序号列
        isShowIndex: {
            type: Boolean,
            default: false
        },
        // 表格高度
        tableHeight: {
            type: String,
            default: ''
        },
        // 表格上方按钮
        tableButtonList: {
            type: Array,
            default: () => { }
        },
        // 总共有多少条数据
        total: {
            type: Number,
            default: 0
        },
        //是否需要翻页
        isPagination:{
            type:Boolean,
            default:true
        },
        //是否需要顶部按钮组
        isButton:{
            type:Boolean,
            default:true
        }
    },
    data () {
        return {
            that: this,
        }
    },
    methods: {
        handleSizeChange (limit) {
            this.$emit('sizeChange', limit)
        },
        handleCurrentChange (offect) {
            this.$emit('pageChange', offect)
        },
    },
    created () {
    },
}
</script>

<style lang="scss" scoped>
.m-table {
    border: 1px solid #ccc;
}
.button-contant {
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #fff;
    height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
}
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f1f4fc;
}
.pagination {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 10px;
}
</style>